<template>
	<view>
		<view class="title-label-box">
			<span>朝向</span>
			<u-row :gutter="20">
				<u-col :span="4" v-for="(item,index) in selectTowards" :key="index">
					<view style="padding-top: 20rpx">
						<button class="bt-class" :style="{'backgroundColor': item.isSelect ? '#4CD964':'#ffffff'}" @click="isSelectTowards(item)">{{item.name}}</button>
					</view>
				</u-col>
			</u-row>

		</view>
		<view class="title-label-box">
			<span>配套</span>
			<span style="font-size: 30rpx;margin-left: 5rpx;color: #999999;">(可多选)</span>

			<u-row>
				<u-col :span="4" v-for="(item,index) in deviceList" :key="index">
					<view style="padding-top: 20rpx">
						<button class="bt-class" :style="{'backgroundColor': item.isSelect ? '#4CD964':'#ffffff'}" @click="isSelectDevice(item)">{{item.name}}</button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="title-label-box">
			<span>特色</span>
			<span style="font-size: 30rpx;margin-left: 5rpx;color: #999999;">(可多选)</span>
			<u-row>
				<u-col :span="4" v-for="(item,index) in tagList" :key="index">
					<view style="padding-top: 20rpx">
						<button shape="circle" class="bt-class" :style="{'backgroundColor': item.isSelect ? '#4CD964':'#ffffff'}" @click="isSelectTags(item)">{{item.name}}</button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="title-label-box">
			<span>入住时间</span>

			<u-row>
				<u-col :span="4">
					<view style="padding-top: 20rpx">
						<button @click="isShowIntoTime = true" class="bt-class">{{liveInTime}}
							<u-icon name="arrow-right"></u-icon>
						</button>
					</view>

					<u-picker mode="time" @confirm="selectIntoTime" v-model="isShowIntoTime" :params="params" start-year="2021"
					 end-year="2025"></u-picker>
				</u-col>
			</u-row>
		</view>
		<view style="height: 300rpx;">
			<u-button class="subBt" shape="circle" :custom-style="{'backgroundColor': '#95ff00','width': '300rpx'}" @click="sureCommit">确认提交</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectTowards: [{
					name: '东向',
					isSelect: false
				}, {
					name: '西向',
					isSelect: false
				}, {
					name: '南向',
					isSelect: false
				}, {
					name: '北向',
					isSelect: false
				}],
				// towardsList: {},
				// selectTagList: [],
				// selectDeviceList: [],
				tagList: [],
				deviceList: [],
				liveInTime: '随时可入住',
				isShowIntoTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					isCheck: false
				},
				checkInTime: '',
			}
		},

		async onLoad(options) {
			await this.getDevice()
			await this.getTag()

			var to = JSON.parse(options.selectTowards)
			if (!(to[0].name == "丰富信息,出租更快速"))
				this.selectTowards = JSON.parse(options.selectTowards)
			if (JSON.parse(options.tagList).length != 0)
				this.tagList = JSON.parse(options.tagList)
			if (JSON.parse(options.deviceList).length != 0)
				this.deviceList = JSON.parse(options.deviceList)
		},
		methods: {
			//获取设置信息
			async getDevice() {
				let res = await this.$request({
					url: '/v1/device/list',
				})
				// console.log(res)
				if (!res.isSuccess) {
					console.log(res.message)
				}
				this.deviceList = res.data
				this.falseSelect(this.deviceList)
			},
			isSelectDevice(device) {
				this.deviceList.forEach((item, index) => {
					if (item.name == device.name) {
						if (item.isSelect) {
							this.$set(this.deviceList[index], "isSelect", false)
						} else {
							this.$set(this.deviceList[index], "isSelect", true)
						}
					}
				})
			},
			//获取标签的信息
			async getTag() {
				let res = await this.$request({
					url: '/v1/tag/list',
				})
				if (!res.isSuccess) {
					console.log(res.message)
				}
				this.tagList = res.data
				this.falseSelect(this.tagList)
			},

			//选择标签
			isSelectTags(tag) {
				this.tagList.forEach((item, index) => {
					if (item.name == tag.name) {
						if (item.isSelect) {
							this.$set(this.tagList[index], "isSelect", false)
						} else {
							this.$set(this.tagList[index], "isSelect", true)
						}
					}
				})
			},
			falseSelect(list) {
				list.forEach((item, index) => {
					this.$set(list[index], "isSelect", false)
				})
			},
			//选择朝向
			isSelectTowards(towards) {
				// console.log(towards)
				this.falseSelect(this.selectTowards)
				this.selectTowards.forEach((item, index) => {
					if (item.name == towards.name) {
						this.$set(this.selectTowards[index], "isSelect", true)
					}
				})
			},
			selectIntoTime(e) {
				this.checkInTime = e.year + '-' + e.month + '-' + e.day
				// console.log(this.checkInTime)
				this.liveInTime = this.checkInTime
			},
			check(checkData) {
				this.isCheck = false
				for (let i = 0; i < checkData.length; i++) {
					if (checkData[i].isSelect) {
						this.isCheck = true
					}
				}
			},
			sureCommit() {
				this.check(this.selectTowards)
				if (!this.isCheck) {
					wx.showToast({
						title: '请选择朝向',
						icon: 'none',
						duration: 1000
					})
					return
				}

				this.check(this.deviceList)
				if (!this.isCheck) {
					wx.showToast({
						title: '请选择设备',
						icon: 'none',
						duration: 1000
					})
					return
				}

				this.check(this.tagList)
				if (!this.isCheck) {
					wx.showToast({
						title: '请选择特色',
						icon: 'none',
						duration: 1000
					})
					return
				}

				let pages = getCurrentPages(); //当前页面
				let prevPage = pages[pages.length - 2]; //上一页面

				prevPage.$vm.selectTowards = this.selectTowards
				prevPage.$vm.tagList = this.tagList
				prevPage.$vm.deviceList = this.deviceList
				prevPage.$vm.liveInTime = this.liveInTime
				wx.navigateBack({
					delta: 1
				})

			}
		}
	}
</script>

<style>
	.title-label-box {
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		font-size: 40rpx;
	}

	.bt-class {
		border: 1rpx solid #999;
		border-radius: 50rpx;
		color: #666;
		font-size: 30rpx;
		line-height: 34px;
		height: 80rpx;
	}

	.active {
		background-color: #4CD964;
	}

	.subBt {
		margin-top: 20rpx;
		width: 300rpx;
		background: #F0AD4E;
	}
</style>
